---
title: Button
description: Used to trigger an action or event
links:
  source: components/button
  storybook: components-button--basic
  recipe: button
---

<ExampleTabs name="button-basic" />

## Anatomy

```jsx
import { Button } from '@saas-ui/react/button'
import { ButtonGroup } from '@saas-ui/react/button-group'
```

```jsx
<Button>Click me</Button>
```

## Examples

### Sizes

Use the `size` prop to change the size of the button. You can set the value to
`xs`, `sm`, `md`, or `lg`.

<ExampleTabs name="button-with-sizes" />

### Variants

Use the `variant` prop to change the visual style of the Button. You can set the
value to `solid`, `subtle`, `outline`, `ghost` or `plain`

<ExampleTabs name="button-with-variants" />

### Icon

Use icons within a button

<ExampleTabs name="button-with-icons" />

### Color

Use the `colorPalette` prop to change the color of the button

<ExampleTabs name="button-with-colors" />

### Loading

Use the `loading` and `loadingText` prop to show a loading spinner

<ExampleTabs name="button-with-loading" />

### ButtonGroup

Use the `ButtonGroup` component to group buttons together

<ExampleTabs name="button-with-group" />

## Props

<PropTable component="Button" part="Button" />

<PropTable component="ButtonGroup" part="ButtonGroup" />
